<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>在线咨询</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-extend.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
    <script src="https://cdn.bootcss.com/angular-file-upload/2.5.0/angular-file-upload.min.js"></script>
    <script src="template/baseModule.js"></script>
    <script src="js/util.js"></script>
    <style type="text/css">
        /**聊天气泡***/
        .left:before{
            position:absolute;
            content:"\00a0";
            width:0;
            height:0;
            border-width:5px 10px 5px 0;
            border-style:solid;
            border-color:transparent rgba(248,248,248,1) transparent transparent;
            top:15px;
            margin-left:-10px;
        }
        .right:before{
            position:absolute;
            content:"\00a0";
            display:inline-block;
            width:0;
            height:0;
            border-width:5px 0 5px 10px;
            border-style:solid;
            border-color:transparent transparent transparent rgba(248,248,248,1);
            left:230px;
            top:15px;

        }
        .messageWrapLeft{
            height: 100%;
            max-width: 230px;
            background-color: rgba(248,248,248,1);
            border: 0;
            border-radius: 8px;
            /*background-image:-moz-linear-gradient(hsla(0,0%,100%, 0.6), hsla(0, 0%, 100%, 0)  30px);
            background-image:-webkit-gradient(linear, 0 0, 0 30, from(hsla(0, 0%, 100%, 0.6)), to(hsla(0, 0%, 100%, 0)));*/
        }
        .messageWrapRight{
            height: 100%;
            max-width: 230px;
            background-color: rgba(248,248,248,1);
            border: 0;
            border-radius: 8px;
            /*background-image:-moz-linear-gradient(hsla(0,0%,100%, 0.6), hsla(0, 0%, 100%, 0)  30px);
            background-image:-webkit-gradient(linear, 0 0, 0 30, from(hsla(0, 0%, 100%, 0.6)), to(hsla(0, 0%, 100%, 0)));*/
        }
    </style>
    <style type="text/css">
        /**点击图片放大显示***/
        .popup {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            display: none;
            z-index: 2501;
        }

        .popup .popup-bg {
            background-color: rgba(0, 0, 0, 0.5);
            width: 100%;
            height: 100%;
        }

        .popup img {
            max-width: 100%;
            max-height: 100%;
        }
    </style>
    <style type="text/css">
        .sendLogo{
            width: 40px;
            height: 40px;
            margin-top: 5px;
            margin-left: 5px;
        }
        img{
            cursor: pointer;
        }
        /**表情面板-web顶部弹出式-deprecated***/
        .emojiPanel{
            z-index:10000;
            position: absolute;
            width: 280px;
            height: 190px;
            overflow-y: auto;
            border: 1px solid #bbbbaf;
            border-radius:8px;
            top:-195px;
            left: -220px;
            background-color: white;
            box-shadow: 5px 5px 3px #b2b2b2;
        }
        /*本来想解决表情图片缩放问题的,好像没效果*/
        img {
            -webkit-transform: scale(1) rotate(0) translate3d(0, 0, 0);
            transform: scale(1) rotate(0) translate3d(0, 0, 0);
        }
    </style>
    <script>
        var m = angular.module("m", ["baseModule"]);
        m.filter('to_trusted', ['$sce', function ($sce) {//强制将html字符串转化为html语句
            return function (text) {
                return $sce.trustAsHtml(text);
            };
        }]);
        var c = m.controller("c", function ($scope, ajax,$interval,$timeout) {
            $scope.htmlInit = function(){
                //把window.innerHeight缓存起来,手机中输入法弹出来会改变此值
                $scope.windowInnerHeight = window.innerHeight;
                //设置msgwindow的高度
                $scope.msgwindowH = {
                    "height" : $scope.windowInnerHeight - 50 - 50//屏幕高度 -顶部 -底部 -动态表情面板
                };
                //设置底部输入框宽度
                $scope.bottomInputW = {
                    "width" : window.innerWidth - 110 -2 -10//屏幕宽度 -表情图片 -边框(div-boder) -margin(偏移)
                };
            };
            $scope.$watch('$viewContentLoaded', function () {
                $scope.htmlInit();
                //假消息
                var tempArr = [
                    {"from": "1", "to": "0", "text": "您好", "type":"text","time": 1520586359909},
                    {"from": "0", "to": "1", "text": "您好!请问有什么可以帮助您呢?", "type":"text","time": 1520586360009},
                    {"from": "1", "to": "0", "text": "中医美容护肤定义是什么?", "type":"text","time": 1520586559909},
                    {"from": "0", "to": "1", "text": "中国发掘和运用中草药美容已有数千年历史。" +
                    "中医美容方法丰富，手段多样，主要包括中药美容、针灸美容、按摩美容、食膳美容、气功美容和火疗美容种方式。" +
                    "中药美容是这4种方式中最主要、最常用、经验最丰富的一部分，早在古代宫廷广为使用，是目前应用最广泛的一种中医美容方法。",
                        "type":"text","time": 1520586661909}];
                for(var i=0;i<tempArr.length;i++){
                    $scope.messageList.push(tempArr[i]);
                }
            });
            /**
             * 云信部分
             */
            /**
             * 消息列表
             * @type {*}
             */
            $scope.nimUtil = nimUtil();
            $scope.messageList = [];
            $scope.loading = false;

            // 单聊发送文本消息
            $scope.inputMessage = "";

            $scope.sendPrivateText = function (obj) {
                var tempObj = {
                    "from": obj.from,
                    "to": obj.to,
                    "text": obj.text
                };
                $scope.inputMessage = "";
                $scope.messageList.push(tempObj);
            };
            /**
             *滚动条
             *每次有屏幕上有消息增加显示,就要让滚动条滚动到最底部
             */
            $("#msg_window").bind('DOMNodeInserted', function() {
                $interval(function () {
                    $scope.nimUtil.operation.scrollToBottom('msg_window',$interval);
                },100,2);
            });
            /**
             * 将文本消息转化为html字符串
             */
            $scope.transferToHtml = function (obj) {
                return $scope.nimUtil.emoji.transferToHtml(obj);
            };
            /**
             * 表情
             * @type {[*]}
             */
            //点击弹出表情面板
            $scope.showSendEmoji = false;
            //表情map
            $scope.emojiMap = $scope.nimUtil.emoji.emojiList.emoji;
            $scope.chooseEmoji = function (obj) {
                $scope.inputMessage += obj.code;
            };
            //图片包裹动态设置宽高比例
            $scope.dynamicImgWidthHeight = function (imgSrc) {
                return $scope.nimUtil.img.dynamicWH(imgSrc,"phone");
            };
            //点击图片放大(全屏)显示
            $scope.viewPicFullScreen = function (path) {
                $scope.nimUtil.img.fullScreen(path);
            };
            //语音消息播放
            $scope.playAudioMsg = function (url,$event) {
                $scope.nimUtil.operation.playAudioMsg(url,$event);
            };
            /**
             * audio语音
             * @type {string}
             */
            //新消息语音提醒
            $scope.hintToneValue = "";
            $scope.getHintTone = function () {
                if($scope.hintToneValue.length > 1){
                    $scope.nimUtil.operation.playHintTone($scope.hintToneValue);
                }else {
                    ajax.ajax("/server/config/getConfig", "POST", {
                        userId: 1,
                        name: "expert_advice_tone"
                    }).success(function (data) {
                        console.log(data);
                        if (data.success) {
                            $scope.hintToneValue = data.value;
                            $scope.nimUtil.operation.playHintTone($scope.hintToneValue);
                        }
                    });
                }
            };
            /**
             * 输入框
             */
            //输入框获得焦点
            $scope.inputGetFocus = function () {
                $scope.showSendEmoji = false;
                $scope.inputBorderStyle.style = {"border-bottom":"1px solid #32CD32"};
                $scope.inputBorderStyle.showEmojiPanel($scope.showSendEmoji);
            };
            //输入框响应回车按键
            $scope.enterEvent = function(e) {
                //用户web暂时不用回车发送,而是换行
                /*var keycode = window.event?e.keyCode:e.which;
                 if(keycode==13){
                 if($scope.inputMessage == ''){
                 return ;
                 }
                 $scope.sendPrivateText();
                 }*/
            };
            //输入框样式
            $scope.inputBorderStyle = {
                style: {"border-bottom":"1px solid #C9C9C9"},
                height: {"height":"50px"},
                onblur: function () {
                    $scope.inputBorderStyle.style = {"border-bottom":"1px solid #C9C9C9"};
                },
                showEmojiPanel: function (b) {
                    //设置msgwindow的高度
                    $scope.msgwindowH = {
                        "height" : $scope.windowInnerHeight - 50 - 50 - (b===true?170:0)//屏幕高度 -顶部 -底部 -动态表情面板
                    };
                    $scope.inputBorderStyle.height = {
                        "height" : b===true ? 50 + 170 : 50
                    };
                }
            };
        });
    </script>
</head>
<body ng-app="m" ng-controller="c" style="position: relative;padding-top: 50px;padding-bottom: 50px;background-color: #F0F0F0;">
<div class="bg-white">
    <!--顶部基本信息-->
    <div class="navbar-fixed-top bg-blue" style="width: 100%;height: 50px;">
        <h4 class="text-center text-white">
            <!--<img style="position: absolute;width: 1em;height: 1.5em;left:15px"
                 src="/jsp/common/img/back.png" onclick="javascript:history.back(-1);">-->
            <span style="font-size: 130%;">医学美容智能语音助手</span>
        </h4>
    </div>
    <!--聊天区域-->
    <div style="height: 100%;min-height: 100%;">
        <!--消息主窗口-->
        <div class="p-a-md" id="msg_window" ng-style="msgwindowH" ng-click="showSendEmoji = false;inputBorderStyle.showEmojiPanel(showSendEmoji);"
             style="overflow:auto;width: 100%;background-color: #ffffff;-webkit-overflow-scrolling : touch;">
            <div ng-show="loading">
                <p class="text-center text-muted"><i class="icon-spin icon-spinner icon-4x"></i></p>
            </div>
            <div ng-repeat="item in messageList" class="p-y">
                <!--显示日期-->
                <p class="text-white text-center" style="margin:6px 0 0;">
                    <span style="padding:3px 9px 3px;background-color: #BFBFBF;border-radius: 8px;"
                          ng-bind="item.time | fmtDateYMDHMsub"></span>
                </p>
                <!--左边专家消息窗体-->
                <div ng-if="'0' == item.from" style="width: 100%;" class="clearfix">
                    <div class="pull-left m-t-lg clearfix" style="width: 295px;position:relative;">
                        <div><img class="img-circle pull-left" ng-src="asset/ai-avatar.png" alt="no img" width="50px" height="50px"></div>
                        <div ng-if="item.type=='text'" class="pull-left left messageWrapLeft" style="margin-left: 15px;">
                            <div style="margin:10px;">
                                <p style="font-size:120%;font-family: HiraginoSansGB W3"
                                   ng-bind-html="transferToHtml(item.text) | to_trusted"></p>
                            </div>
                        </div>
                        <div ng-if="item.type=='html'" class="pull-left left messageWrapLeft" style="margin-left: 15px;">
                            <span ng-bind-html="transferToHtml(item.text) | to_trusted"></span>
                        </div>
                        <div ng-if="item.type=='image'" class="pull-left left messageWrapLeft" style="margin-left: 15px;">
                            <img class="img-rounded" ng-click="viewPicFullScreen(item.file.url)"
                                 ng-src="{{item.          `        ` `       file.url}}" ng-style="dynamicImgWidthHeight(item.file.url)" alt="no img">
                        </div>
                        <div ng-if="item.type=='audio'" class="pull-left left messageWrapLeft" style="margin-left: 15px;">
                            <div style="margin:10px;">
                                <p style="font-size:120%;font-family: HiraginoSansGB W3"
                                   ng-click="playAudioMsg(item.file.url,$event)">【语音】
                                    <img src="asset/radio.png" alt="" width="25" height="25" /></p>
                            </div>
                        </div>
                        <div ng-if="item.type=='geo' || item.type=='location'" class="pull-left left messageWrapLeft" style="margin-left: 15px;">
                            <div style="margin:10px;">
                                <p style="font-size:120%;font-family: HiraginoSansGB W3"><span>【位置】</span>
                                    <span ng-bind="item.geo.title"></span></p>
                            </div>
                        </div>
                        <div ng-if="item.type=='video'" class="pull-left left messageWrapLeft" style="margin-left: 15px;">
                            <video ng-src="{{item.file.url}}" controls="controls"
                                width="150" height="80">
                                您的浏览器不支持 video 标签。
                            </video>
                        </div>
                    </div>
                </div>
                <!--右边自己(用户)消息窗体-->
                <div ng-if="'1' == item.from" style="width: 100%;" class="clearfix">
                    <div class="pull-right m-t-lg clearfix" style="width: 295px;position:relative;">
                        <div><img class="img-circle pull-right" ng-src="asset/user-avatar.png" alt="no img" width="50px" height="50px"></div>
                        <div ng-if="item.type=='text'" class="pull-right right messageWrapRight" style="margin-right: 15px;">
                            <div style="margin:10px;">
                                <p style="font-size:120%;font-family: HiraginoSansGB W3"
                                   ng-bind-html="transferToHtml(item.text) | to_trusted"></p>
                            </div>
                        </div>
                        <div ng-if="item.type=='image'" class="pull-right right messageWrapLeft" style="margin-right: 15px;">
                            <img class="img-rounded" ng-click="viewPicFullScreen(item.file.url)"
                                 ng-src="{{item.file.url}}" ng-style="dynamicImgWidthHeight(item.file.url)" alt="no img">
                        </div>
                        <div ng-if="item.type=='audio'" class="pull-right right messageWrapLeft" style="margin-right: 15px;">
                            <div style="margin:10px;">
                                <p style="font-size:120%;font-family: HiraginoSansGB W3"
                                   ng-click="playAudioMsg(item.file.url,$event)">【语音】
                                    <img src="asset/radio.png" alt="" width="25" height="25" /></p>
                            </div>
                        </div>
                        <div ng-if="item.type=='geo' || item.type=='location'" class="pull-right right messageWrapLeft" style="margin-right: 15px;">
                            <div style="margin:10px;">
                                <p style="font-size:120%;font-family: HiraginoSansGB W3"><span>【位置】</span>
                                    <span ng-bind="item.geo.title"></span></p>
                            </div>
                        </div>
                        <div ng-if="item.type=='video'" class="pull-right right messageWrapLeft" style="margin-right: 15px;">
                            <video ng-src="{{item.file.url}}" controls="controls" width="150" height="80">
                                您的浏览器不支持 video 标签。
                            </video>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--输入区域-->
    <div class="clearfix p-t-md navbar-fixed-bottom" ng-style="inputBorderStyle.height"
         style="padding-left:0;padding-right:0;padding-bottom:0;background-color: white;border: 1px solid #c9c9c9;">
        <div class="clearfix">
            <!--输入框-->
            <div class="pull-left clearfix" style="margin-left: 10px;margin-right: 0;" ng-style="bottomInputW">
            <textarea rows="1" ng-focus="inputGetFocus()" ng-keyup="enterEvent($event)" type="text" ng-model="inputMessage"
                      style="background-color:transparent;border:0;height:30px;resize: none;outline: none;width: 100%;"
                      ng-style="inputBorderStyle.style" ng-blur="inputBorderStyle.onblur()"></textarea>
            </div>
            <!--发送按钮图片-->
            <div class="pull-left clearfix" style="width: 110px;margin-left: 0;margin-right: 0;position:relative;">
                <img ng-click="showSendEmoji = !showSendEmoji;inputBorderStyle.showEmojiPanel(showSendEmoji);" class="sendLogo" src="asset/emojiLogo.png" alt=""
                     style="width: 30px;height: 30px;margin-top: 0;margin-left: 15px;">
                <img onclick="imgInputId.click()" ng-click="showSendEmoji = false;inputBorderStyle.showEmojiPanel(showSendEmoji);" ng-show="inputMessage.length<=0" class="sendLogo"
                     style="width: 30px;height: 30px;margin-top: 0;margin-left: 15px;" src="asset/sendVideo.png" alt="">
                <button ng-show="inputMessage.length>0" ng-disabled="inputMessage=='' || inputMessage==null"
                        ng-click="sendPrivateText();inputBorderStyle.style = {'border-bottom':'1px solid #C9C9C9'};"
                        style="height: 30px;line-height: 15px;margin: 0;"
                        class="btn btn-success text-center">发送</button>
                <!--发送图片-->
                <!--<div>
                    <input onchange="doUpload('imgInputId')" id="imgInputId"
                           style="display: none;" type="file" name="file" accept="image/png;image/jpg;image/gif" />
                </div>-->
            </div>
        </div>
        <!--表情面板-->
        <div ng-show="showSendEmoji" class="pull-left clearfix"
             style="height: 170px;padding: 8px;width: 100%;margin-bottom: 0;overflow-y: auto;">
            <div class="pull-left" ng-click="chooseEmoji(item)"
                 style="margin-left:6px;margin-top: 5px;" ng-repeat="item in emojiMap">
                <img ng-src="emoji/{{item.img}}" width="32" height="32" alt="">
            </div>
        </div>
    </div>
</div>

<div class="fullScreen"></div>
<script>
    (function() {
        var jsonStr = "{\"results\":{\"contrast\":53.08479690551758,\"energy\":0.04508516564965248,\"entropy\":6.48350715637207,\"hemoglobin\":0.010401144623756409,\"homogenity\":0.4686485826969147,\"macula\":0.007223095279186964,\"melanin\":0.010401144623756409,\"oilPercent\":6.621354714297922e-06,\"poreAvgR\":2.527766227722168,\"poreMaxR\":9.91755199432373,\"poreMinR\":0,\"poreVarianceR\":1.5809030532836914,\"porphyrinPercent\":0.9999843239784241,\"splashPercent\":0.010401144623756409,\"whitening\":202.08616638183594,\"wrinklePercent\":0.028906075283885002},\"userInfo\":{\"age\":24,\"area\":17,\"id\":\"666666\",\"nation\":1,\"sex\":1,\"userId\":46160}}";
        console.log(JSON.parse(jsonStr));
        var jStr = "{\"results\":" +
            "{\"contrast\":53.08479690551758,\"energy\":0.04508516564965248,\"entropy\":6.48350715637207,\"hemoglobin\":0.010401144623756409,\"homogenity\":0.4686485826969147," +
            "\"macula\":0.007223095279186964,\"melanin\":0.010401144623756409,\"oilPercent\":6.621354714297922e-06,\"poreAvgR\":2.527766227722168,\"poreMaxR\":9.91755199432373,\"poreMinR\":0," +
            "\"poreVarianceR\":1.5809030532836914,\"porphyrinPercent\":0.9999843239784241,\"splashPercent\":0.010401144623756409,\"whitening\":202.08616638183594,\"wrinklePercent\":0.028906075283885002}," +
            "\"userInfo\":{\"age\":24,\"area\":17,\"id\":\"666666\",\"nation\":1,\"sex\":1,\"userId\":46160}" +
            "}";
        console.log(JSON.stringify(JSON.parse(jStr)));
    })();

    (function (Jquery) {
       var d


    })(Jquery);

</script>
</body>
</html>